<template>
  <view class="container">
    <!-- 顶部 搜索 banner -->
    <view>
      <u-navbar
        backIconColor="#fff"
        :is-back="true"
        :background="background"
        :border-bottom="false"
        title-color="#fff"
      >
      </u-navbar>
      <!-- </view> -->
      <view class="" style="position: relative">
        <view
          class="contentBg"
          :style="{
            paddingTop: `${statusBarHeight + navbarHeight}px`,
            backgroundImage: `url(${getImageUrl('video-bg.png')})`,
            height: `${200 + statusBarHeight}px`,
            top: `-${statusBarHeight + navbarHeight}px`
          }"
        >
        </view>
      </view>
      <view class="content">
        <view class="top dis-flex flex-y-between flex-y-center">
          <view class="t-l dis-flex">
            <u-avatar src="" size="120"></u-avatar>
            <view class="u-info">
              <view>用户姓名</view>
              <view class="id">id：84833829</view>
            </view>
          </view>
          <view class="t-r" @click="routeTo('/uvideo/user-info')">
            <u-icon name="/static/xgzl.png" size="40"></u-icon>
          </view>
        </view>
        <view class="card">
          <view class="tl flex-y-center">
            <u-icon
              style="top: 3rpx; position: relative"
              name="/static/xxzl.png"
              size="24"
            ></u-icon>
            <text class="mr-20">北京大学研究生在读</text>
            <text class="mr-20"> 26岁</text>
            <text class="mr-20"> 女</text>
            <text> 贵州·贵阳</text>
          </view>
          <view class="des">个人简介用户体验设计、个人简介、移动互联网、交互设计、界面设计...</view>
          <view class="count dis-flex">
            <view class="count-item" @click="routeTo('/uvideo/fans')">
              <view class="num">11.2w</view>
              <view class="ctl">粉丝</view>
            </view>
            <view class="count-item" @click="show = true">
              <view class="num">55.2w</view>
              <view class="ctl">获赞</view>
            </view>
            <view class="count-item" @click="routeTo('/uvideo/follow')">
              <view class="num">189</view>
              <view class="ctl">关注</view>
            </view>
          </view>
        </view>
        <view class="service dis-flex flex-y-around">
          <view
            class="service-item"
            @click="routeTo(ser.path)"
            v-for="(ser, index) in services"
            :key="index"
          >
            <u-icon :name="ser.icon" size="90"></u-icon>
            <view class="service-name">{{ ser.name }}</view>
          </view>
        </view>
      </view>
    </view>
    <u-popup
      v-model="show"
      mode="center"
      border-radius="14"
      height="220"
      duration="250"
      :closeable="true"
      close-icon-pos="top-right"
    >
      <view class="popup-box dis-flex flex-y-center flex-x-center">[用户姓名] 共获得 55.2w 赞</view>
    </u-popup>
  </view>
</template>

<script>
let systemInfo = uni.getSystemInfoSync()
export default {
  data() {
    return {
      show: false,
      services: [
        {
          id: 'zuop',
          name: '我的作品',
          icon: '/static/wdzp.png',
          path: '/uvideo/list?type=my'
        },
        {
          id: 'zuop',
          name: '我的收藏',
          icon: '/static/wdsc.png',
          path: '/uvideo/list?type=follow'
        },
        {
          id: 'zuop',
          name: '我的点赞',
          icon: '/static/wddz.png',
          path: '/uvideo/list?type=like'
        },
        {
          id: 'zuop',
          name: '发布作品',
          icon: '/static/cjzb.png',
          path: '/uvideo/camera'
        }
      ],
      background: {
        background: 'transparent'
      },
      background1: {
        background: '#10A28F'
      },
      imgStyle: {
        width: '12rem'
      },
      statusBarHeight: systemInfo.statusBarHeight
    }
  },
  computed: {
    // 转换字符数值为真正的数值
    navbarHeight() {
      // #ifdef APP-PLUS || H5
      return this.height ? this.height : 50
      // #endif
      // #ifdef MP
      // 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
      // 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
      // return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
      let height = systemInfo.platform == 'ios' ? 44 : 48
      return this.height ? this.height : height
      // #endif
    }
  },
  methods: {
    handleScroll(e) {
      // 页面滚动时触发
      this.scrollTop = e.detail.scrollTop // 更新滚动位置
      // console.log('页面上滑', this.scrollTop);
    },
    queryList() {},
    routeTo(url) {
      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.popup-box {
  width: 100%;
  height: 100%;
  padding: 20rpx;
}
.container {
  background-color: rgb(248, 248, 248);
  height: 100vh;
}

.contentBg {
  width: 100%;
  position: absolute;
  top: 0px;

  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  // height: 400rpx;
}

.content {
  position: relative;
  padding: 20rpx 0;

  .top {
    padding: 0 20rpx;
    margin-bottom: 40rpx;
    height: 120rpx;

    .u-info {
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      padding: 12rpx 20rpx;
      font-size: 34rpx;
      color: #ffffff;

      .id {
        font-size: 28rpx;
      }
    }
  }

  .card {
    height: 400rpx;
    background: #ffffff;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    padding: 30rpx 20rpx;

    .tl {
      margin: 10rpx 0 30rpx 0;
      font-size: 24rpx;
      color: #999999;

      .u-icon {
        margin-right: 10rpx;
      }
    }

    .des {
      font-size: 28rpx;
      color: #666666;
      line-height: 48rpx;
    }

    .count {
      height: 160rpx;
      background: #f5f5f5;
      border-radius: 10rpx;
      margin-top: 20rpx;

      .count-item {
        width: 30%;
        margin-right: 5%;
        text-align: center;
        height: 100%;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        padding: 34rpx 0;

        .num {
          font-size: 32rpx;
        }

        .ctl {
          font-size: 24rpx;
        }
      }

      .count-item:last-child {
        margin-right: 0;
      }
    }
  }

  .service {
    width: 100%;
    height: 180rpx;
    background: #ffffff;
    margin-top: 20rpx;

    .service-item {
      height: 100%;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      padding: 23rpx;
      align-items: center;
      font-size: 26rpx;
      color: #333333;
    }
  }
}

.mr-20 {
  margin-right: 40rpx;
}
</style>
